Vue.createApp({
  template: "#my-app",
  data() {
    return {
      message: "Hello World",
      books: [
        {
          id: 1,
          name: "《算法导论》",
          date: " 2006-9 ",
          price: 85.0,
          count: 1,
        },
        {
          id: 2,
          name: "《UNIX编程艺 术》",
          date: " 2006-2",
          price: 59.0,
          count: 1,
        },
        {
          id: 3,
          name: "《编程珠玑》",
          date: " 2008 -10",
          price: 39.0,
          count: 1,
        },
      ],
    };
  },
  methods: {
    increment(index) {
      this.books[index].count++;
    },
    decrement(index) {
      this.books[index].count--;
    },
    removeBook(index) {
      this.books.splice(index, 1);
    },
    formatPrice(price) { 
      return "￥" + price;
    }
  },
  computed: {
    totalPrive() {
      let finalPrice = 0;
      for (const item of this.books) {
        finalPrice += item.count * item.price;
      }
      return finalPrice;
    },
    filterBook() {
      return this.books.map((item) => {
        const newItem = Object.assign({}, item);
        newItem.price = "￥" + item.price;
        return item;
      });
    },
  },
}).mount("#app");
